<!-- 逾期提醒的弹窗组件 -->
<template>
  <el-dialog v-model="dialogVisible" width="66%" modal :append-to-body="true" :close-on-click-modal="false" draggable
    @close="closeDialog">
    <el-card shadow="never" style="margin: 10px 0 0 0">
      <h3>逾期提醒</h3>
      <div style="padding: 15px 0">
        <span class="info">单号：{{ overdueDetail.billNumber }}</span> &nbsp; &nbsp;
        <span class="info">接收人：{{ overdueDetail.recipient }}</span> &nbsp; &nbsp;
        <span class="info">联系电话：{{ overdueDetail.recipientPhone }}</span> &nbsp; &nbsp;
        <span class="info">出库时间：{{ overdueDetail.outDate }}</span> &nbsp; &nbsp;
        <span class="info">预计归还日期：{{ overdueDetail.planBackDate }}</span> &nbsp; &nbsp;
      </div>
      <el-table :data="overdueDetail.detailsList" border style="width: 100%; margin-top: 20px" height="40vh">
        <el-table-column prop="archiveNo" label="档号" key="1" v-if="labelType === 0"></el-table-column>
        <el-table-column prop="archiveName" label="题名" key="2" v-if="labelType === 0"></el-table-column>
        <el-table-column prop="boxNo" label="盒号" key="3" v-if="labelType === 1"></el-table-column>
        <el-table-column prop="boxName" label="盒名" key="4" v-if="labelType === 1"></el-table-column>
        <el-table-column prop="positionName" label="位置" key="5"></el-table-column>
        <el-table-column prop="inFlag" label="入库状态" key="6">
          <template slot-scope="{ row }">
            <el-tag v-if="row.inFlag == 1" type="success">已入库</el-tag>
            <el-tag v-else type="warning">未入库</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </el-dialog>
</template>

<script>
import { getDetail } from '@/api/rfid/outBill'

export default {
  name: 'overdueDialog',
  components: {},
  data() {
    return {
      dialogVisible: false,
      labelType: '',
      overdueDetail: null,
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
  methods: {
    openDialog(row) {
      this.dialogVisible = true
      this.getDetail(row)
    },
    closeDialog() {
      this.dialogVisible = false
    },
    getDetail(row) {
      this.labelType = row.labelType
      getDetail(row.billNumber)
        .then((res) => {
          if (res.data.code === 200) {
            this.overdueDetail = res.data.data
          } else {
            this.overdueDetail = {
              detailsList: [],
              billNumber: '',
              recipient: '',
              recipientPhone: '',
              outDate: '',
              planBackDate: '',
            }
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
  },
}
</script>
<style lang="less" scoped>
.info {
  color: rgba(51, 51, 51, 0.45);
}

.el-dialog__body {
  padding: 10px;
}
</style>
